<template>
  <!-- 添加商品弹框组件 -->
  <view class="add-goods-popup">
    <view class="title">添加商品</view>

    <!-- 添加商品表单 -->
    <view class="form-list">
      <view v-for="(item, i) in goodsList" :key="i" class="form-box">
        <view class="item flex flex-ai-c flex-jc-sb">
          <text class="color-666">商品名</text>
          <input
            type="text"
            v-model="item.goods_Name"
            placeholder="请选择或输入商品名称"
          />
          <view class="flex flex-ai-c" v-if="!item.goods_Name">
            <text class="font-28 color-999">|</text>
            <view @click="goSelectGoods()">
              <text class="color-FBB000 font-24 ml-20 mr-20">选择商品</text>
              <u-icon name="arrow-right" size="24rpx" color="#FBB000"></u-icon>
            </view>
          </view>
        </view>

        <view class="item flex flex-ai-c flex-jc-sb">
          <text class="color-666">进货价</text>
          <input
            type="number"
            v-model="item.in_Price"
            placeholder="请输入商品进货价"
            @blur="checkPrice(item)"
            @input="priceChange($event, item, 'inPrice')"
          />
          <text>元</text>
        </view>

        <view class="item flex flex-ai-c flex-jc-sb">
          <text class="color-666">销售价</text>
          <input
            type="number"
            v-model="item.sale_Price"
            placeholder="请输入销售价"
            :data-ph="i"
            @blur="checkPrice(item)"
            @input="priceChange($event, item, 'salePrice')"
          />
          <text>元</text>
        </view>

        <view class="item flex flex-ai-c flex-jc-sb">
          <text class="color-666">加价率</text>
          <input
            type="number"
            v-model="item.added_Rate"
            placeholder="请输入商品加价率"
            @blur="checkPrice(item)"
            @input="priceChange($event, item, 'addRate')"
          />
          <text>%</text>
        </view>

        <view class="item flex flex-ai-c flex-jc-sb">
          <text class="color-666">数量</text>
          <view class="num-box flex flex-ai-c">
            <text class="btn" @click="less(item)">-</text>
            <input type="number" v-model="item.amount" class="cont" />
            <text class="btn" @click="add(item)">+</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 按钮 -->
    <view class="btn-box flex flex-ai-c">
      <view class="btn" @click="confirm()">
        <i-button
          text="继续添加"
          bg-color="#333"
          color="#FFE23E"
          shape="circleLeft"
        ></i-button>
      </view>
      <view class="btn" @click="confirm(true)">
        <i-button text="确定" color="#333" shape="circleRight"></i-button>
      </view>
    </view>
  </view>
</template>

<script>
import iButton from '@/components/carGoods/i-button.vue'

export default {
  name: 'addGoodsPopup',
  components: { iButton },
  data() {
    return {
      formData: {
        name: '',
        entryPrice: '',
        markup: '',
        price: '',
        amount: 1,
      },
    }
  },

  computed: {
    // pricePreview() {
    //   if (this.formData.entryPrice && this.formData.markup) {
    //     let m = this.formData.markup / 100 // 加价率
    //     let ep = parseFloat(this.formData.entryPrice)
    //     let sum = ep * m + ep // 进货价*加价率+进货价
    //     this.formData.price = sum
    //     return sum
    //   } else {
    //     return ''
    //   }
    // },

    // 商品服务列表
    goodsList() {
      return this.$store.state.afterSales.checkedServeList
    },
  },

  methods: {
    // 减
    less(item) {
      if (item.amount === 1) return
      item.amount -= 1
    },

    // 加
    add(item) {
      item.amount += 1
    },

    //销售价检查
    checkPrice(item) {
      if (item.sale_Price && Number(item.sale_Price) < Number(item.in_Price)) {
        uni.showToast({
          title: '销售价不能低于进货价，请重新输入',
          icon: 'none',
        })

        item.sale_Price = ''
        item.added_Rate = ''
      }
    },

    // 确定
    confirm(type) {
      let flag = [false, false, false, false]
      this.goodsList.map((item) => {
        if (!item.goods_Name) {
          flag[0] = true
        }
        if (!item.in_Price) {
          flag[1] = true
        }
        if (!(item.sale_Price + '')) {
          flag[2] = true
        }
        if (!(item.added_Rate + '')) {
          flag[3] = true
        }
      })
      if (flag.includes(true)) {
        let tips = [
          '请输入商品名称',
          '请输入进货价',
          '请输入销售价',
          '请输入加价率',
        ]
        uni.showToast({
          title: tips[flag.indexOf(true)],
          icon: 'none',
        })
        return false
      }
      this.$emit('change', {
        type,
        data: this.goodsList,
      })

      // 初始化弹窗数据
      this.$store.commit('afterSales/setCheckedServeList', [
        {
          goods_Name: '',
          in_Price: '',
          added_Rate: '',
          sale_Price: '',
          amount: 1,
        },
      ])
    },

    // 跳转选择商品页
    goSelectGoods() {
      uni.navigateTo({
        url: '/pages_afterSales/selectOrderType/selectOrderType',
      })
    },

    // 监听进货价输入
    priceChange(e, data, type) {
      if (type === 'addRate') {
        let sum = 0
        if (data.in_Price && data.added_Rate + '') {
          let m = data.added_Rate / 100 // 加价率
          let ep = parseFloat(data.in_Price)
          sum = Math.round((ep * m + ep) * 100) / 100 // 进货价*加价率+进货价
        }
        data.sale_Price = sum || ''
      } else {
        let m = 0
        if (data.in_Price && data.sale_Price + '') {
          let sum = parseFloat(data.sale_Price) // 加价率
          let ep = parseFloat(data.in_Price)
          m = Math.round(((sum - ep) / ep) * 10000) / 100
        }
        data.added_Rate = m || 0
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.add-goods-popup {
  min-height: 394rpx;
  max-height: 1100rpx;

  .title {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff;
    z-index: 9;
    height: 106rpx;
    line-height: 106rpx;
    font-size: 32rpx;
    color: #333;
    text-align: center;
    box-shadow: 0 0 10rpx 0 #eee;
  }
}

// 表单
.form-list {
  padding: 110rpx 24rpx 140rpx;
}
.form-box {
  padding: 0 24rpx;
  border: 1px solid #e1e1e1;
  border-radius: 30rpx;

  & + .form-box {
    margin-top: 34rpx;
  }

  .item {
    padding: 33rpx 0;

    & + .item {
      border-top: 1px solid #eee;
    }

    > input {
      flex: 1;
      padding: 0 50rpx;
      font-size: 28rpx;
    }

    // 计数器
    .num-box {
      .btn {
        width: 48rpx;
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        font-size: 48rpx;
        color: #999;
      }
      .cont {
        width: 48rpx;
        height: 48rpx;
        margin: 0 16rpx;
        background-color: #eeeeee;
        border-radius: 10rpx;
        text-align: center;
      }
    }
  }
}

// 底部按钮
.btn-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120rpx;
  background: #ffffff;
  box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
  padding: 0 24rpx;

  .btn {
    width: 50%;

    .i-button {
      width: 100%;
    }
  }
}
</style>
